<template>
  <Header></Header>
  <Drawer></Drawer>
  <el-breadcrumb separator="/" style="font-size: 20px;color: #2AB28B;">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/pageList/'+ids }">档案管理</el-breadcrumb-item>
    <el-breadcrumb-item>报告列表</el-breadcrumb-item>
  </el-breadcrumb>

  <div class = 'pageListBotton'>
    <el-button type="primary"  @click="onPageAdd" class="xinjian">
      <template #prefix>
      </template>
      新建档案
      <img src="../assets/img/add.png" alt="">
    </el-button>
    <span class="onBtnRight" @click="onHome"><img src="../assets/img/pageList_qiehuan.png" alt=""> 更换群体</span>
  </div>

  <div class="pageListBotton">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-select v-model="sex" placeholder="请选择性别" :style="{'float':'left'}">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item>
        <div class="page_provider_title">出生日期</div>
        <el-config-provider :locale="zhCn">
          <el-date-picker
              v-model="birth"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :style="{'float':'left'}"
          ></el-date-picker>
        </el-config-provider>
      </el-form-item>

      <el-form-item>
        <el-config-provider :locale="zhCn">
          <div class="page_provider_title">测评时间</div>
          <el-date-picker
              v-model="establish"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :style="{'float':'left'}"
          ></el-date-picker>
        </el-config-provider>
      </el-form-item> -->

      <el-form-item>
        <el-input v-model="yisheng" placeholder="请输入测评医生"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="onDefault(0,0, 1)">搜索</el-button>
        <el-button Plain @click="onDefault(1,0, 1)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-table :data="tableData" style="width: 85%;margin-left: 5%;" v-infinite-scroll="load"  infinite-scroll-disabled="loading" >
    <div class="loading" v-if="loading">
      <span id="load-text">{{loadText}}</span>
    </div>
    <el-table-column prop="id" label="序号" />
    <el-table-column label="姓名" prop="username" />
    <el-table-column label="性别">
    <template  #default="scope">
      {{scope.row.sex== 1 ? '女' :'男'}}
    </template>
    </el-table-column>
    <el-table-column prop="save_member" label="测评医生" width="200"></el-table-column>
    <el-table-column fixed="right" prop="createtime" width="220" label="测评时间"></el-table-column>
    <el-table-column fixed="right" width="220" label="操作">
      <template  #default="scope">
                      <span
                          :style="{'border':'none','margin-right':'16px','color': '#409EFF','cursor':'pointer'}"
                          @click="onReport(scope.$index, scope.row)"
                      >查看报告</span>
        <span
            :style="{'border':'none','margin-right':'16px','color': '#409EFF','cursor':'pointer'}"
            @click="cp_shanchu(scope.$index, scope.row)"
        >删除</span>
      </template>
    </el-table-column>
  </el-table>

</template>

<script setup>
import {useRoute, useRouter} from "vue-router"
const route = useRoute()
const router = useRouter()

import {ElMessage} from "element-plus";
import {defineComponent, onMounted, ref, watch, getCurrentInstance} from 'vue';
import * as api from "../api/loginHttp";

import Header from './common/Header.vue';
import Drawer from './common/Drawer.vue';

import http, {baseUrl} from "../utils/http";

import zhCn from'element-plus/lib/locale/lang/zh-cn'

const { ctx } = getCurrentInstance()
const ids = ref()
const labName = ref()
const loadText = ref('正在加载...')
const tableData = ref([])
const loading = ref(false)
const pages = ref(0);
const limit = ref(20);
const name = ref('');
const sex = ref('');
const yisheng = ref('');
const birth = ref([]);
const establish = ref([]);
const totalPages = ref();

const options= [
  {
    value: "男",
    label: "男"
  },
  {
    value: "女",
    label: "女"
  }
]


function $getTimes(params) {
  var date = new Date(params);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  const time = y + "-" + m + "-" + d;
  return time;
}

const onDefault = async (isReset, addTo = 0, Botton = 0) => {

  if(isReset == 1) {
    name.value = '';
    sex.value = '';
    birth.value = '';
    establish.value = '';
  }

  if(Botton == 1 ){
    pages.value = 0;
  }

  let params = {
    'group_id': ids.value,
    'pages': pages.value,
    'limit': limit.value,
  }

  params.pages = pages.value

  if (name.value != "") {
    params.username = name.value
  }
  if (sex.value != "") {
    params.sex = sex.value == '女' ? 1 : 0
  }
  if (birth.value[0] != undefined) {
    params.birth_start = $getTimes(birth.value[0]);
  }
  if (birth.value[1] != undefined) {
    params.birth_end = $getTimes(birth.value[1])
  }
  if (establish.value[0] != undefined) {
    params.start_time = $getTimes(establish.value[0]);
  }
  if (establish.value[1] != undefined) {
    params.end_time = $getTimes(establish.value[1]);
  }
  const data = await api.evaluation(params);
  let len = data.data.data.contents.length

  if (data && len == 0 && !len) {
    loadText.value = '没有找到相关数据'
  } else if (data && len < 20) {
    loadText.value = '暂无更多数据'
  } else {
    loading.value = false
  }

  if(addTo == 1){
    tableData.value = tableData.value.concat(data.data.data.contents); //因为每次后端返回的都是数组，所以这边把数组拼接到一起
  } else {
    tableData.value = data.data.data.contents;
  }
  totalPages.value = data.data.data.totalPages;
  // let data = await this.$getEvaluationList(params)
}

const load = async () => {
  //滑到底部时进行加载
  loading.value = true;
  pages.value = pages.value + 20; //页数+10
  await onDefault(0, 1); //调用接口，此时页数+1，查询下一页数据
}

const onReport = async (index, row) => {
  await router.push({'path': '/report/' + ids.value + '/'+row.user_id + '/' + row.id})
}

const onHome = async () => {
  await router.push({'path':'/Home/'})
}
const onPageAdd = async () => {
  await router.push({'path':'/pageAdd/' + ids.value})
}

const cp_shanchu = async () => {
  
}

const fetchData = async () => {
  if(route.params.groupId) {
    ids.value = route.params.groupId;
    if (ids.value == 3) {
      labName.value = '婴幼儿营养测评'
    } else if (ids.value == 5) {
      labName.value = '孕产妇营养测评'
    } else if (ids.value == 6) {
      labName.value = '成年人营养测评'
    } else if (ids.value == 7) {
      labName.value = '慢性病营养测评'
    } else if (ids.value == 8) {
      labName.value = '团体营养测评'
    }
    // http.get('api/archives/index?group_id='+ ids.value).then((res)=>{
    //   if(res.data.code === 1) {
    //     console.log(res)
    //   } else {
    //     ElMessage.error(res.data.msg)
    //     router.push({'path': '/pageList/' + groupId.value})
    //   }
    // })
  }
}

onMounted(() => {
  fetchData()
  onDefault()
})
</script>

<style scoped>

</style>
